import { useEffect } from 'react';
import { useAppStore } from '@/stores/appStore';

export function useKeyboardShortcuts() {
  const { 
    play, 
    pause, 
    reset, 
    jumpToStage, 
    setSpeed,
    toggleFullscreen,
    toggleSidebar,
    animation 
  } = useAppStore();
  
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      // Don't trigger shortcuts when user is typing in input fields
      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
        return;
      }
      
      switch (event.key) {
        case ' ':
          event.preventDefault();
          if (animation.isPlaying) {
            pause();
          } else {
            play();
          }
          break;
          
        case 'r':
          if (event.ctrlKey || event.metaKey) {
            event.preventDefault();
            reset();
          }
          break;
          
        case 'f':
          if (event.ctrlKey || event.metaKey) {
            event.preventDefault();
            toggleFullscreen();
          }
          break;
          
        case 's':
          if (event.ctrlKey || event.metaKey) {
            event.preventDefault();
            toggleSidebar();
          }
          break;
          
        case 'ArrowLeft':
          event.preventDefault();
          if (animation.currentStage > 0) {
            jumpToStage(animation.currentStage - 1);
          }
          break;
          
        case 'ArrowRight':
          event.preventDefault();
          if (animation.currentStage < 6) {
            jumpToStage(animation.currentStage + 1);
          }
          break;
          
        case '1':
        case '2':
        case '3':
        case '4':
        case '5':
        case '6':
        case '7':
          const stageNumber = parseInt(event.key) - 1;
          if (stageNumber >= 0 && stageNumber <= 6) {
            jumpToStage(stageNumber);
          }
          break;
          
        case '-':
          event.preventDefault();
          setSpeed(Math.max(0.25, animation.playbackSpeed - 0.25));
          break;
          
        case '=':
        case '+':
          event.preventDefault();
          setSpeed(Math.min(3.0, animation.playbackSpeed + 0.25));
          break;
          
        case '0':
          event.preventDefault();
          setSpeed(1.0);
          break;
          
        case 'Escape':
          if (document.fullscreenElement) {
            document.exitFullscreen();
          }
          break;
      }
    };
    
    window.addEventListener('keydown', handleKeyDown);
    
    return () => {
      window.removeEventListener('keydown', handleKeyDown);
    };
  }, [
    play, 
    pause, 
    reset, 
    jumpToStage, 
    setSpeed, 
    toggleFullscreen, 
    toggleSidebar, 
    animation.isPlaying, 
    animation.currentStage, 
    animation.playbackSpeed
  ]);
  
  // Show keyboard shortcuts help
  useEffect(() => {
    console.log('⌨️ Keyboard Shortcuts:');
    console.log('  Space: Play/Pause');
    console.log('  ← →: Previous/Next stage');
    console.log('  1-7: Jump to stage');
    console.log('  - +: Decrease/Increase speed');
    console.log('  0: Reset speed to 1x');
    console.log('  Ctrl+R: Reset animation');
    console.log('  Ctrl+F: Toggle fullscreen');
    console.log('  Ctrl+S: Toggle sidebar');
    console.log('  Esc: Exit fullscreen');
  }, []);
}